import Book from "../../model/Book.ts";


const ProfileCard = (props: {book: Book}) => {
    const {book} = props
    return (

        <div className="col mt-3">
            <div className="card">
                <div style={{display: 'none'}} className="item-id">{String(book.itemId)}</div>
                <img className="bd-placeholder-img card-img-top image-holder crop-image card-image" src={book.title}
                     alt=""
                     width="100%" height="225"/>
                <div className="card-body">
                    <p className="card-text mb-0">{book.title}</p>
                    <p className="text-secondary p-0 mt-1">{book.description}</p>
                    <div className="d-flex justify-content-between align-items-center">
                        <div className="btn-group">
                            <button type="button"
                                    className="btn btn-sm btn-outline-secondary rounded-start-4 btn-view">View in store
                            </button>
                            <button type="button"
                                    className="btn btn-sm btn-outline-secondary rounded-end-4 btn-purchase"
                                    value={String(book.itemId)}>Return
                            </button>
                        </div>
                        <span className="badge rounded-pill p-2">
              <span>27 days</span>
            </span>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default ProfileCard